<template>
  <div>
    <van-form @submit="handleBlur">
      <div class="flex-row flex-align-center">
        <div>
          <van-icon
            name="arrow-left"
            size="18"
            class="search-arrow-left"
            @click="judgeAppBack()"
          />
        </div>
        <van-field
          class="header-input"
          label-width="7.5"
          v-model.trim="search"
          clearable
          placeholder="请输入保险产品名称"
          ref="productName"
        >
          <template #left-icon>
            <div>
              <van-icon name="search" size="18" class="search-arrow-search" />
            </div>
          </template>
        </van-field>
        <div class="header-right" @click="handleBlur">搜索</div>
      </div>
    </van-form>

    <!-- 搜索历史 -->
    <div class="search-content">
      <div class="flex-row flex-align-center flex-justify-between">
        <div class="search-history-title">搜索历史</div>
        <img
          src="./img/del.png"
          class="search-history-title-delete"
          @click="del"
        />
      </div>
      <div class="search-history-list">
        <div
          class="search-history-list-item"
          v-for="item in historyList"
          :key="item.index"
          @click="handleClick(item.value)"
        >
          {{ item.value }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import NavBar from '@/components/h5header'
import { mapMutations, mapGetters } from 'vuex'
import isAppBack from '@/mixin/isAppBack'
export default {
  mixins: [isAppBack],
  // components: { NavBar },
  computed: {
    ...mapGetters('searchhHistory', ['historyList'])
  },
  data() {
    return {
      search: ''
    }
  },
  mounted() {
    console.log('dfsdfsdsdfsdfs', this.historyList)
    this.$nextTick(() => {
      this.$refs.productName.focus()
    })
  },
  created() {
    this.search = this.$route.query.productName || ''
  },
  methods: {
    ...mapMutations('searchhHistory', ['setHistoryList', 'delHistoryList']),
    handleCanel() {
      this.search = ''
    },
    handleBlur() {
      this.$router.replace({
        path: '/product',
        query: {
          ...this.$route.query,
          productName: this.search
        }
      })
      let data = this.historyList.filter(item => {
        return item.value === this.search
      })
      if (this.search !== '' && data.length === 0) {
        this.setHistoryList(this.search)
      }
    },
    handleClick(item) {
      this.$router.push({
        path: '/product',
        query: {
          ...this.$route.query,
          productName: item
        }
      })
    },
    del() {
      this.$dialog
        .confirm({
          title: '是否删除搜索历史记录?'
        })
        .then(() => {
          this.delHistoryList()
        })
        .catch(() => {})
    }
  }
}
</script>
<style scoped lang="less">
.header-input {
  background-color: #f5f5f5;
  border-radius: 17px;
  height: 32px;
  line-height: 16px;
  margin-left: 15px;
}
.search-arrow-left {
  color: #999;
  margin-left: 10px;
}
.search-arrow-search {
  color: #999;
}
.header-right {
  color: @c-color-primary;
  font-size: 14px;
  width: 50px;
  text-align: right;
  margin-right: 10px;
}
.search-content {
  padding: 15px 15px 0 15px;
}
.search-history-title {
  font-size: 16px;
  color: #333;
  font-weight: bold;
}
.search-history-title-delete {
  width: 17px;
  height: 18px;
}
.search-history-list {
  margin-top: 13px;
}
.search-history-list-item {
  display: inline-block;
  margin-right: 10px;
  font-size: 13px;
  background-color: #f5f5f5;
  border-radius: 15px;
  color: #666;
  padding: 8px 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 315px;
}
.hot-search {
  padding: 30px 15px 0 15px;
}
.hot-search-img {
  width: 14px;
  height: 17px;
}
</style>
